<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="clock" width="800" height="600"></canvas>
		<script type="text/javascript">
			var clock = document.querySelector("#clock");
			var ctx = clock.getContext("2d");
			ctx.translate(400,300);
			ctx.rotate(-Math.PI/2);
			ctx.save();
			setInterval(function(){
				ctx.clearRect(-400,-300,800,600)
				renderClock();
			},1000);
			//画大圆
			function renderClock(){
				ctx.restore();
				ctx.save();
				ctx.beginPath();
					ctx.arc(0,0,200,0,2*Math.PI);
					ctx.fillStyle = "aliceblue"
					ctx.lineWidth = 10
					ctx.shadowBlur = 5
					ctx.strokeStyle = "#ccc"
					ctx.stroke();
					ctx.fill()
				ctx.closePath();
				//画刻度
				ctx.restore()
				ctx.save()
				for (var i=0;i<60;i++){
					ctx.rotate(2*Math.PI/60);
					ctx.beginPath()
						ctx.moveTo(190,0);
						ctx.lineTo(200,0);
						ctx.lineWidth = 3;
						ctx.stroke();
					ctx.closePath()
				}
				//画大刻度
				ctx.restore();
				ctx.save();
				for (var i=0;i<12;i++){
					ctx.rotate(2*Math.PI/12);
					ctx.beginPath()
						ctx.moveTo(180,0);
						ctx.lineTo(200,0);
						ctx.lineWidth = 6;
						ctx.strokeStyle = "cadetblue"
						ctx.stroke();
					ctx.closePath()
				}
				
				var time = new Date()
				var hour = time.getHours();
				var min = time.getMinutes();
				var sec = time.getSeconds();
				hour = hour>12?hour-12:hour;
				console.log(hour+':'+min+':'+sec)
				//画时
				ctx.restore();
				ctx.save();
				ctx.beginPath();
					ctx.rotate(2*Math.PI/12*hour+2*Math.PI/12/60*min);
					ctx.moveTo(-10,0);
					ctx.lineTo(140,0);
					ctx.strokeStyle = "dimgrey"
					ctx.lineWidth = 9;
					ctx.stroke();
				ctx.closePath();
				//画分
				ctx.restore();
				ctx.save();
				ctx.beginPath();
					ctx.rotate(2*Math.PI/60*min+2*Math.PI/60/60*sec);
					ctx.moveTo(-25,0);
					ctx.lineTo(160,0);
					ctx.strokeStyle = "skyblue"
					ctx.lineWidth = 6;
					ctx.stroke();
				ctx.closePath();
				//画秒
				ctx.restore();
				ctx.save();
				ctx.beginPath();
					ctx.rotate(2*Math.PI/60*sec)
					ctx.moveTo(-40,0);
					ctx.lineTo(175,0);
					ctx.strokeStyle = "lightcoral"
					ctx.lineWidth = 3;
					ctx.stroke();
				ctx.closePath();
				//画中间
				ctx.restore();
				ctx.save();
				ctx.beginPath();
					ctx.arc(0,0,10,0,2*Math.PI);
					ctx.fillStyle = "lightpink"
					ctx.strokeStyle = "lightgray"
					ctx.fill()
					ctx.stroke();
				ctx.closePath();
			}
		</script>
	</body>
</html>
